/**
* Created by admin on 2018/3/10.
*/
<template>
  <section>
  <!--工具条-->
  <!--<div class="divid-line"></div>-->
    <el-form :inline="true" :model="searchForm" class="toolbar">
      <el-form-item label="本学期第几周">
        <el-select v-model="searchForm.weekCount" placeholder="请选择" @change="getScheduleInfo">
          <el-option v-for="item in weekCount" :label="item.code" :key="item.code" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="divid-line"></div>
  <template>
    <el-table
      :data="tableData"
      border
      style="width: 100%; text-align: center">
      <el-table-column
        fixed
        prop="time"
        label="时刻"
        width="150">
      </el-table-column>
      <el-table-column label="星期一" prop="monday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.monday}}</p>
            <div slot="reference">
              {{miniText(scope.row.monday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期二" prop="tuesday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.tuesday}}</p>
            <div slot="reference">
              {{miniText(scope.row.tuesday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期三" prop="wednesday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.wednesday}}</p>
            <div slot="reference">
              {{miniText(scope.row.wednesday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期四" prop="thursday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.thursday}}</p>
            <div slot="reference">
              {{miniText(scope.row.thursday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期五" prop="friday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.friday}}</p>
            <div slot="reference">
              {{miniText(scope.row.friday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期六" prop="saturday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.saturday}}</p>
            <div slot="reference">
              {{miniText(scope.row.saturday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="星期日" prop="sunday">
        <template scope="scope">
          <el-popover trigger="hover" placement="right">
            <p class="hideTooMuch">{{scope.row.sunday}}</p>
            <div slot="reference">
              {{miniText(scope.row.sunday)}}
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </template>

    <!--<el-dialog-->
      <!--title="修改空闲时间"-->
      <!--:visible.sync="scheduleDialog"-->
      <!--width="50%">-->
      <!--<el-row>-->
        <!--<el-col :span="2" :offset="3">星期一：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.monday"></el-input></el-col>-->
        <!--<el-col :span="2" >星期二：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.tuesday"></el-input></el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
        <!--<el-col :span="2" :offset="3">星期三：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.wednesday"></el-input></el-col>-->
        <!--<el-col :span="2" >星期四：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.thursday"></el-input></el-col>-->
      <!--</el-row>-->
      <!--<el-row>-->
        <!--<el-col :span="2" :offset="3">星期五：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.friday"></el-input></el-col>-->
        <!--<el-col :span="2" >星期六：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.saturday"></el-input></el-col>-->
      <!--</el-row>-->
      <!--<el-row>-->
        <!--<el-col :span="2" :offset="3">星期日：</el-col>-->
        <!--<el-col :span="7"><el-input v-model="updateData.sunday"></el-input></el-col>-->
      <!--</el-row>-->

      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="scheduleDialog = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="showDiaglog">确认修改</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->
  </section>

</template>

<script>
  import DataUtil from '../../common/dataUtil.js'
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default {
    components: {
      ElCol,
      ElRow},
    data() {
      return {
        searchForm:{
            weekCount:1,
        },
        updateData:{
          monday:"",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
        },
        tableData: [{
          monday:"",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          type: 'am1',
          time: '8:20——9:05',
        }, {

          monday:"",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          type: 'am2',
          time: '9:15——10:00',
        }, {

          monday:"",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          type: 'am3',
          time: '10:20——11:05',
        }, {

          monday:"",
          tuesday: "",
          wednesday: "",
          thursday: "",
          friday: "",
          saturday: "",
          sunday: "",
          type: 'am4',
          time: '11:15——12:00',
        },
          {

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'noon',
            time: '12:00——13:59',
          },{

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'pm1',
            time: '14:00——14:45',
          },{

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'pm2',
            time: '14:55——15:40',
          },{

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'pm3',
            time: '16:00——16:45',
          },{

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'pm4',
            time: '16:55——17:40',
          },{

            monday:"",
            tuesday: "",
            wednesday: "",
            thursday: "",
            friday: "",
            saturday: "",
            sunday: "",
            type: 'night',
            time: '17:40——24:00',
          }],
        scheduleData:[],
        weekCount: [],
        type: '',
      };
    },
    methods: {

      getScheduleInfo(){

        this.$http.post('schedule/getUserFreeScheduleById',{'orginzerId':DataUtil.id(),"weekCount":this.searchForm.weekCount}).then(response => {
          if (response.body.code == 1) {
            this.scheduleData = response.body.data;

            this.tableData[0].monday = this.scheduleData[0].am1 == null ? "":this.scheduleData[0].am1.substr(0, (this.scheduleData[0].am1).length - 1);
            this.tableData[0].tuesday = this.scheduleData[1].am1 == null ? "":this.scheduleData[1].am1.substr(0, (this.scheduleData[1].am1).length - 1);
            this.tableData[0].wednesday = this.scheduleData[2].am1 == null ? "":this.scheduleData[2].am1.substr(0, (this.scheduleData[2].am1).length - 1);
            this.tableData[0].thursday = this.scheduleData[3].am1 == null ? "":this.scheduleData[3].am1.substr(0, (this.scheduleData[3].am1).length - 1);
            this.tableData[0].friday = this.scheduleData[4].am1 == null ? "":this.scheduleData[4].am1.substr(0, (this.scheduleData[4].am1).length - 1);
            this.tableData[0].saturday = this.scheduleData[5].am1 == null ? "":this.scheduleData[5].am1.substr(0, (this.scheduleData[5].am1).length - 1);
            this.tableData[0].sunday = this.scheduleData[6].am1 == null ? "":this.scheduleData[6].am1.substr(0, (this.scheduleData[6].am1).length - 1);

            this.tableData[1].monday = this.scheduleData[0].am2 == null ? "":this.scheduleData[0].am2.substr(0, (this.scheduleData[0].am2).length - 1);
            this.tableData[1].tuesday = this.scheduleData[1].am2 == null ? "":this.scheduleData[1].am2.substr(0, (this.scheduleData[1].am2).length - 1);
            this.tableData[1].wednesday = this.scheduleData[2].am2 == null ? "":this.scheduleData[2].am2.substr(0, (this.scheduleData[2].am2).length - 1);
            this.tableData[1].thursday = this.scheduleData[3].am2 == null ? "":this.scheduleData[3].am2.substr(0, (this.scheduleData[3].am2).length - 1);
            this.tableData[1].friday = this.scheduleData[4].am2 == null ? "":this.scheduleData[4].am2.substr(0, (this.scheduleData[4].am2).length - 1);
            this.tableData[1].saturday = this.scheduleData[5].am2 == null ? "":this.scheduleData[5].am2.substr(0, (this.scheduleData[5].am2).length - 1);
            this.tableData[1].sunday = this.scheduleData[6].am2 == null ? "":this.scheduleData[6].am2.substr(0, (this.scheduleData[6].am2).length - 1);

            this.tableData[2].monday = this.scheduleData[0].am3 == null ? "":this.scheduleData[0].am3.substr(0, (this.scheduleData[0].am3).length - 1);
            this.tableData[2].tuesday = this.scheduleData[1].am3 == null ? "":this.scheduleData[1].am3.substr(0, (this.scheduleData[1].am3).length - 1);
            this.tableData[2].wednesday = this.scheduleData[2].am3 == null ? "":this.scheduleData[2].am3.substr(0, (this.scheduleData[2].am3).length - 1);
            this.tableData[2].thursday = this.scheduleData[3].am3 == null ? "":this.scheduleData[3].am3.substr(0, (this.scheduleData[3].am3).length - 1);
            this.tableData[2].friday = this.scheduleData[4].am3 == null ? "":this.scheduleData[4].am3.substr(0, (this.scheduleData[4].am3).length - 1);
            this.tableData[2].saturday = this.scheduleData[5].am3 == null ? "":this.scheduleData[5].am3.substr(0, (this.scheduleData[5].am3).length - 1);
            this.tableData[2].sunday = this.scheduleData[6].am3 == null ? "":this.scheduleData[6].am3.substr(0, (this.scheduleData[6].am3).length - 1);

            this.tableData[3].monday = this.scheduleData[0].am4 == null ? "":this.scheduleData[0].am4.substr(0, (this.scheduleData[0].am4).length - 1);
            this.tableData[3].tuesday = this.scheduleData[1].am4 == null ? "":this.scheduleData[1].am4.substr(0, (this.scheduleData[1].am4).length - 1);
            this.tableData[3].wednesday = this.scheduleData[2].am4 == null ? "":this.scheduleData[2].am4.substr(0, (this.scheduleData[2].am4).length - 1);
            this.tableData[3].thursday = this.scheduleData[3].am4 == null ? "":this.scheduleData[3].am4.substr(0, (this.scheduleData[3].am4).length - 1);
            this.tableData[3].friday = this.scheduleData[4].am4 == null ? "":this.scheduleData[4].am4.substr(0, (this.scheduleData[4].am4).length - 1);
            this.tableData[3].saturday = this.scheduleData[5].am4 == null ? "":this.scheduleData[5].am4.substr(0, (this.scheduleData[5].am4).length - 1);
            this.tableData[3].sunday = this.scheduleData[6].am4 == null ? "":this.scheduleData[6].am4.substr(0, (this.scheduleData[6].am4).length - 1);

            this.tableData[4].monday = this.scheduleData[0].noon == null ? "":this.scheduleData[0].noon.substr(0, (this.scheduleData[0].noon).length - 1);
            this.tableData[4].tuesday = this.scheduleData[1].noon == null ? "":this.scheduleData[1].noon.substr(0, (this.scheduleData[1].noon).length - 1);
            this.tableData[4].wednesday = this.scheduleData[2].noon == null ? "":this.scheduleData[2].noon.substr(0, (this.scheduleData[2].noon).length - 1);
            this.tableData[4].thursday = this.scheduleData[3].noon == null ? "":this.scheduleData[3].noon.substr(0, (this.scheduleData[3].noon).length - 1);
            this.tableData[4].friday = this.scheduleData[4].noon == null ? "":this.scheduleData[4].noon.substr(0, (this.scheduleData[4].noon).length - 1);
            this.tableData[4].saturday = this.scheduleData[5].noon == null ? "":this.scheduleData[5].noon.substr(0, (this.scheduleData[5].noon).length - 1);
            this.tableData[4].sunday = this.scheduleData[6].noon == null ? "":this.scheduleData[6].noon.substr(0, (this.scheduleData[6].noon).length - 1);


            this.tableData[5].monday = this.scheduleData[0].pm1 == null ? "":this.scheduleData[0].pm1.substr(0, (this.scheduleData[0].pm1).length - 1);
            this.tableData[5].tuesday = this.scheduleData[1].pm1 == null ? "":this.scheduleData[1].pm1.substr(0, (this.scheduleData[1].pm1).length - 1);
            this.tableData[5].wednesday = this.scheduleData[2].pm1 == null ? "":this.scheduleData[2].pm1.substr(0, (this.scheduleData[2].pm1).length - 1);
            this.tableData[5].thursday = this.scheduleData[3].pm1 == null ? "":this.scheduleData[3].pm1.substr(0, (this.scheduleData[3].pm1).length - 1);
            this.tableData[5].friday = this.scheduleData[4].pm1 == null ? "":this.scheduleData[4].pm1.substr(0, (this.scheduleData[4].pm1).length - 1);
            this.tableData[5].saturday = this.scheduleData[5].pm1 == null ? "":this.scheduleData[5].pm1.substr(0, (this.scheduleData[5].pm1).length - 1);
            this.tableData[5].sunday = this.scheduleData[6].pm1 == null ? "":this.scheduleData[6].pm1.substr(0, (this.scheduleData[6].pm1).length - 1);

            this.tableData[6].monday = this.scheduleData[0].pm2 == null ? "":this.scheduleData[0].pm2.substr(0, (this.scheduleData[0].pm2).length - 1);
            this.tableData[6].tuesday = this.scheduleData[1].pm2 == null ? "":this.scheduleData[1].pm2.substr(0, (this.scheduleData[1].pm2).length - 1);
            this.tableData[6].wednesday = this.scheduleData[2].pm2 == null ? "":this.scheduleData[2].pm2.substr(0, (this.scheduleData[2].pm2).length - 1);
            this.tableData[6].thursday = this.scheduleData[3].pm2 == null ? "":this.scheduleData[3].pm2.substr(0, (this.scheduleData[3].pm2).length - 1);
            this.tableData[6].friday = this.scheduleData[4].pm2 == null ? "":this.scheduleData[4].pm2.substr(0, (this.scheduleData[4].pm2).length - 1);
            this.tableData[6].saturday = this.scheduleData[5].pm2 == null ? "":this.scheduleData[5].pm2.substr(0, (this.scheduleData[5].pm2).length - 1);
            this.tableData[6].sunday = this.scheduleData[6].pm2 == null ? "":this.scheduleData[6].pm2.substr(0, (this.scheduleData[6].pm2).length - 1);

            this.tableData[7].monday = this.scheduleData[0].pm3 == null ? "":this.scheduleData[0].pm3.substr(0, (this.scheduleData[0].pm3).length - 1);
            this.tableData[7].tuesday = this.scheduleData[1].pm3 == null ? "":this.scheduleData[1].pm3.substr(0, (this.scheduleData[1].pm3).length - 1);
            this.tableData[7].wednesday = this.scheduleData[2].pm3 == null ? "":this.scheduleData[2].pm3.substr(0, (this.scheduleData[2].pm3).length - 1);
            this.tableData[7].thursday = this.scheduleData[3].pm3 == null ? "":this.scheduleData[3].pm3.substr(0, (this.scheduleData[3].pm3).length - 1);
            this.tableData[7].friday = this.scheduleData[4].pm3 == null ? "":this.scheduleData[4].pm3.substr(0, (this.scheduleData[4].pm3).length - 1);
            this.tableData[7].saturday = this.scheduleData[5].pm3 == null ? "":this.scheduleData[5].pm3.substr(0, (this.scheduleData[5].pm3).length - 1);
            this.tableData[7].sunday = this.scheduleData[6].pm3 == null ? "":this.scheduleData[6].pm3.substr(0, (this.scheduleData[6].pm3).length - 1);

            this.tableData[8].monday = this.scheduleData[0].pm4 == null ? "":this.scheduleData[0].pm4.substr(0, (this.scheduleData[0].pm4).length - 1);
            this.tableData[8].tuesday = this.scheduleData[1].pm4 == null ? "":this.scheduleData[1].pm4.substr(0, (this.scheduleData[1].pm4).length - 1);
            this.tableData[8].wednesday = this.scheduleData[2].pm4 == null ? "":this.scheduleData[2].pm4.substr(0, (this.scheduleData[2].pm4).length - 1);
            this.tableData[8].thursday = this.scheduleData[3].pm4 == null ? "":this.scheduleData[3].pm4.substr(0, (this.scheduleData[3].pm4).length - 1);
            this.tableData[8].friday = this.scheduleData[4].pm4 == null ? "":this.scheduleData[4].pm4.substr(0, (this.scheduleData[4].pm4).length - 1);
            this.tableData[8].saturday = this.scheduleData[5].pm4 == null ? "":this.scheduleData[5].pm4.substr(0, (this.scheduleData[5].pm4).length - 1);
            this.tableData[8].sunday = this.scheduleData[6].pm4 == null ? "":this.scheduleData[6].pm4.substr(0, (this.scheduleData[6].pm4).length - 1);

            this.tableData[9].monday = this.scheduleData[0].night == null ? "":this.scheduleData[0].night.substr(0, (this.scheduleData[0].night).length - 1);
            this.tableData[9].tuesday = this.scheduleData[1].night == null ? "":this.scheduleData[1].night.substr(0, (this.scheduleData[1].night).length - 1);
            this.tableData[9].wednesday = this.scheduleData[2].night == null ? "":this.scheduleData[2].night.substr(0, (this.scheduleData[2].night).length - 1);
            this.tableData[9].thursday = this.scheduleData[3].night == null ? "":this.scheduleData[3].night.substr(0, (this.scheduleData[3].night).length - 1);
            this.tableData[9].friday = this.scheduleData[4].night == null ? "":this.scheduleData[4].night.substr(0, (this.scheduleData[4].night).length - 1);
            this.tableData[9].saturday = this.scheduleData[5].night == null ? "":this.scheduleData[5].night.substr(0, (this.scheduleData[5].night).length - 1);
            this.tableData[9].sunday = this.scheduleData[6].night == null ? "":this.scheduleData[6].night.substr(0, (this.scheduleData[6].night).length - 1);
            } else {
              this.$message.error(response.body.message);
          }

        });

      },
      getWeekCount() {
          for (let index = 1; index< 21 ;index++) {
              this.weekCount.push({code : index});
          }
      },
//      handleClick(row) {
//          this.scheduleDialog = true;
//          this.updateData.monday = row.monday;
//          this.updateData.tuesday = row.tuesday;
//          this.updateData.wednesday = row.wednesday;
//          this.updateData.thursday = row.thursday;
//          this.updateData.friday = row.friday;
//          this.updateData.saturday = row.saturday;
//          this.updateData.sunday = row.sunday;
//          this.type = row.type;
//      },
//      showDiaglog() {
//
//          let _data = {
//            userId: DataUtil.id(),
//            weekCount: this.searchForm.weekCount,
//            monday: this.updateData.monday,
//            tuesday: this.updateData.tuesday,
//            wednesday: this.updateData.wednesday,
//            thursday: this.updateData.thursday,
//            friday: this.updateData.friday,
//            saturday: this.updateData.saturday,
//            sunday: this.updateData.sunday,
//            type: this.type
//          };
//          this.$http.post('schedule/updateUserScheduleById',_data).then(response =>
//          {
//              if (response.body.code == 1) {
//                  this.$message.success('修改成功');
//                  this.scheduleDialog = false;
//                  this.getScheduleInfo();
//              } else {
//                  this.$message.error(response.body.message);
//              }
//          })
//      },
      miniText(text) {
        if (text.length > 20) {
          text = text.substr(0, 20) + '...';
        }
        return text;
      },
    },
    mounted: function () {
      this.getScheduleInfo();
      this.getWeekCount();
    }
  }
</script>


  <style>
  /*侧边框布局*/
  .containers {
    width: 100%;
    /*height: 400px;*/
    display: flex;

  }
  .el-input {
    width: 150px;
  }
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
  }
  .containers .asides {
    flex: 6;

  }
  .containers .mains {
    flex: 4;
    margin-left: 40px;
  }
  .other_remark {
    width: 100%;
  }
  .mains .smallRemark {
    width: 100%;
  }
  .asides table {
    border-spacing: 0;
    border: 1px solid #A9A9A9 ;
    border-radius: 2px;
  }
  .asides table td {
    border: .5px solid #efefef;
    word-wrap:break-word;
    line-height: 20px;
    padding: 5px;
  }
  table td img {
    width: 100%;
  }
  .hideTooMuch {
    max-width: 268px;
    word-wrap: break-word;
  }
  .question_radio {
    padding-bottom: 30px;
    margin: 5px 10px;
  }
  .question_radio .radio_box {
    /*margin-bottom: -30px;*/
    line-height: 20px;
    float: right;
  }
  .addreBook {
    text-align: center;
    width: 40px;
  }
  /* 标题 */
  .main-title{
    font-size: 22px;
    margin-top: -15px;
    margin-bottom: 15px;
  }
  .one-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 7px;
  }
  .two-title{
    font-size: 13px;
    color: #888;
    margin: 10px 0
  }
  .subtitle{
    font-size: 13px;
    color: #888;
  }
  .orderBox .el-row {
    margin: 8px 30px;
  }
  .orderBox .el-col span{
    margin-right: 10px;
  }
  .orderBox .el-button span,.orderBox .el-tag span{
    margin-right: 0;
  }
  .orderBox .box-card .el-button{
    margin-right: 5px;
  }
  .orderBox .grid-content {
    line-height: 28px;
  }

  .divid-line{
    height: 10px;
    background: #f1f2f7;
  }
  /*借款信息*/
  .loanDetail{
    margin: 0 30px 15px;
    width: 94%;
    max-height:250px;
  }
  /*依图识别*/
  .yituInfo{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  /*征信*/
  .orderBox .box-card{
    height: 225px;
  }
  .JXLBox{
    border: 1px solid #ccc;
    padding: 10px
  }
  .JXLBox div{
    padding: 5px;
  }

  .orderBox .el-table .info-row {
    background: #e2f0e4;
  }

  .orderBox .el-table .red-row{
    background: #F33;
  }
  .redInfo{
    color: #F33;
  }

  .line-height .el-col{
    margin-bottom: 10px;
  }
  .faceCheck {
    margin: 0 auto;
    overflow: hidden;
  }
  .faceCheck .faceImg{
    width: 45%;
    height: 350px;
    overflow: hidden;
    margin: 1.5%;
    float: left;
    text-align: center;
  }
  .faceCheck .faceImg img {
    margin: 0 auto;
    display: block;
    width: 90%;
    height: 90%;
/*    border: .5px solid #F1F2F7;
border-radius: 5px;*/
}
.faceImgTop img{
  margin: 0 auto;
  height: 200px;
  display: block;
  max-height: 100%;
  max-width: 100%;
  min-width: 65%;
  min-height: 65%;
  border: .5px solid #F1F2F7;
  border-radius: 5px;
}
.faceImgBottom img{
  margin: 0 auto;
  display: block;
  height: 300px;
  min-width: 80%;
  min-height: 80%;
  border: .5px solid #F1F2F7;
  border-radius: 5px;
}
table td img {
  width: 100%;
}
.faceImgTop .handleImg {
  width: 40%;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
</style>
